<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<%String ctx = request.getContextPath();%>

<link href="<%=ctx%>/css/bootstrap.min.css"  rel="stylesheet">
<link href="<%=ctx%>/css/login.css"  rel="stylesheet">
<script src="<%=ctx%>/js/jquery.min.js"></script>
<script src="<%=ctx%>/js/md5.min.js"></script>

<title>EasyExam</title>
</head>
<body>
	<c:if test="${fn:length(error) gt 0}"> 
		<script>
			alert("${error}");
		</script>
	</c:if>

<div class="container wrap">
	<div class="row col-md-4 col-md-offset-4">
		<form action="<%=ctx%>/servlet/LoginServlet" method="post">
			<h2>登录</h2>
			<input class="form-control" type="text" id="usernum" name="unum" placeholder="学号" required>
			<input class="form-control" type="password" id="pwd" name="password" placeholder="密码" required>
			<input class="form-control"  style="display: none" type="text" id="md5" name="md5str">
			<div class="img-wrap">
				<input class="form-control half" type="text" id="answer" name="answerNum" placeholder="验证码" required>
				<img onclick="reload()" id="img" src="<%=ctx%>/servlet/ImgServlet"/>
			</div>

			<button class="btn btn-lg btn-primary btn-block" type="submit">确定</button>
		</form>
<%--		<button class="btn btn-lg btn-success btn-block" onclick="sw()" style="visibility: hidden">切换</button>--%>
		<button class="btn btn-lg btn-success btn-block" onclick="sw()">切换</button>
	</div>
</div>

<script>
	let  what = 0

	function reload() {
		$("#img").attr("src", "<%=ctx%>/servlet/ImgServlet?"+Math.random())
	}

	function sw() {
		// return
		if(what%2===0) {
			$("#usernum").val("admin")
			$("#pwd").val("1111")
		} else {
			$("#usernum").val("1111")
			$("#pwd").val("1111")
		}
		what += 1
		fillMD5()
	}

	$(document).ready(function(){
		fillMD5();
	})

	function fillMD5() {
		let md5Dom = document.getElementById('md5');
		let pwdDom = document.getElementById('pwd');
		md5Dom.value = md5(pwdDom.value)
		pwdDom.addEventListener('input', function(event) {
			md5Dom.value = md5(event.target.value)
		});
	}
	
</script>

</body>
</html>